<template>
  <div class="bottom-charts">
    <div class="bc-chart-item">
      <MyChart :options="option1"  class="circleCellCls" v-if="circleVis" />
    </div>
    <dv-decoration-2 :color="borderColor" class="decoration-1" :reverse="true" style="width:5px;" />
    <div class="bc-chart-item">
      <MyChart :options="option2"  class="circleCellCls" v-if="circleVis" />
    </div>
    <dv-decoration-2 :color="borderColor" class="decoration-2" :reverse="true" style="width:5px;" />
    <div class="bc-chart-item">
      <MyChart :options="option3"  class="circleCellCls" v-if="circleVis" />
    </div>
    <dv-decoration-2 :color="borderColor" class="decoration-3" :reverse="true" style="width:5px;" />
    <div class="bc-chart-item">
      <MyChart :options="option4"  class="circleCellCls" v-if="circleVis" />
    </div>
  </div>
</template>

<script>
import MyChart from "./widgets/MyChart";
import chartConfig from "./js/chartConfig";
export default {
  name: 'BottomCharts',
  components: {
    MyChart
  },
  props:{
    ccData:{
      require:true,
      type:Array
    }
  },
  data () {
    return {
      circleVis:false,
      borderColor:['#2d8cf0','#2d8cf0'],
      btChartId1:'btchart1',
      btChartId2:'btchart2',
      btChartId3:'btchart3',
      btChartId4:'btchart4',
      option1:{},
      option2:{},
      option3:{},
      option4:{},
      initFunc:function (c) {
        var centerY = c.series[0].center[1];
        // 动态设置标题位置
        c.setTitle({
          y:centerY+40
        });
      }
    }
  },
  mounted() {
    this.option1=chartConfig.guageOptions(this.getOption(this.ccData,0));
    this.option2=chartConfig.guageOptions(this.getOption(this.ccData,1));
    this.option3=chartConfig.guageOptions(this.getOption(this.ccData,2));
    this.option4=chartConfig.guageOptions(this.getOption(this.ccData,3));
    this.circleVis=true;
  },
  methods:{
    getOption:function (data,index) {
      let dataArr1 = data[index];
      let names = [];
      let values=[];
      let unit='';
      for (let ccd of dataArr1){
        names.push(ccd.name);
        values.push(ccd.data);
        unit=ccd.measure;
      }
      return {title:names[0],names:names,values:values,unit:unit}
    }
  }
}
</script>

<style lang="scss" scoped>
    .bottom-charts {
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;

      .bc-chart-item {
        width: 25%;
        height: 100%;
        padding-top: 20px;
        box-sizing: border-box;

        .circleCellCls{
          width: 100%;
          height: 100%;
        }
      }

      .bcci-header {
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
      }

      .dv-active-ring-chart {
        height: calc(100% - 80px);
      }

      .label-tag {
        height: 30px;
      }

      .active-ring-name {
        font-size: 18px !important;
      }

      .decoration-1, .decoration-2, .decoration-3 {
        display: flex;
        left: 0;
      }
    }
</style>
